<template>
  <!-- 添加好友的对话框 -->
  <a-modal class="add-friend-modal" title="添加好友" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
    <div class="input-container"><span>用户ID:</span><input type="text" v-model="userId"></div>
    <div class="input-container"><span>添加好友说明:</span><input type="text" v-model="content"></div>
  </a-modal>
</template>

<script>
import { api_addFriendReq } from '@/api/friendRequest'

export default {
  name: 'add-friend-modal',
  data () {
    return {
      userId: '',
      content: '',
      visible: false,
      confirmLoading: false,
    }
  },
  methods: {
    showModal () {
      this.visible = true;
    },

    handleCancel () {
      this.visible = false;
    },

    async handleOk () {
      if (!this.userId.trim()) {
        this.$message.warning('用户ID不能为空哦!')
        return
      }

      this.confirmLoading = true;

      let res = await api_addFriendReq({ friendId: this.userId.trim(), content: this.content.trim() || `你好, 我是${this.$store.state.userInfo.userName}` })
      if (res.data.code === 200) {
        this.$message.success('请求发送成功!')
      } else {
        // this.$message.error('请求发送失败!')
        this.$message.error(res.data.msg)
      }

      Object.assign(this.$data, this.$options.data())
    },
  },
}
</script>

<style scoped>
input {
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 5px;
}

input:focus {
  outline: none;
}

.input-container {
  margin: 10px;
}

.input-container span {
  display: inline-block;
  width: 100px;
}
</style>